<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>主页</title>
<script type="text/javascript" src="static/js/main.js"></script>
<style type="text/css">
  #pPBox{
      z-index:1;
      background:#FFE4B5; 
      width:30%;
      height:50%;
      position:absolute;
      left:35%;
      top:25%;
      display:none;
  }
  #pause{
      z-index:2;
      width:99%;
      height:99%;
      position:absolute;
      margin:0px;
      padding:0px;
      display:none;
  }
  #gameBody{
      width:50%;
      height:50%;
      position:absolute;
      left:35%;
      top:25%;
  }
  #mainBody{
      width:100%;
      height:100%;
      position:absolute;
  }
  .img{
  width:100%;
  height:100%;
  }
</style>
</head>
<body  onload="start();" id="body">
    <div id="pause" style="background: #fff url(static/img/pause.png) no-repeat center" onclick="restartAfterStop()">
    </div>
    <div id="pPBox">
                <div id="boxBody" style="height:70%;width:100%"align="center"></div>
                <div align="center" style="width:60% ;height:20%">
                <span id="restart" onclick="restart()">重新开始</span>
                <span id="restartNow" onclick="restartNow()">重玩本关</span>
                <span id="next" onclick="next()">下一关</span>
                <span id="boxEnd" onclick="end()">结束</span>
                </div>
    </div>
    <div id="gameBody">
    <table id="mainBody" onmousedown="clickEle(event)">
         <thead>
             <tr>
                 <td>积分：</td>
                 <td id="integral">0</td>
                 <td>关卡：</td>
                 <td id="level">1</td>
             </tr>
         </thead>
         <tbody id="tbody">
               <tr>
                  <td class="Squirrel"  id="1"><img  class="img" alt="1" src="static/img/2.jpg"></td>
                  <td class="Squirrel"  id="2"><img class="img" alt="2" src="static/img/2.jpg"></td>
                  <td class="Squirrel"  id="3"><img class="img" alt="3" src="static/img/2.jpg"></td>
               </tr>
                <tr>
                  <td class="Squirrel"  id="4"><img class="img" alt="4" src="static/img/2.jpg"></td>
                  <td class="Squirrel"  id="5"><img class="img" alt="5" src="static/img/2.jpg"></td>
                  <td class="Squirrel"  id="6"><img class="img" alt="6" src="static/img/2.jpg"></td>
                </tr>
                 <tr>
                  <td class="Squirrel"  id="7"><img class="img" alt="7" src="static/img/2.jpg"></td>
                  <td class="Squirrel"  id="8"><img class="img" alt="8" src="static/img/2.jpg"></td>
                  <td class="Squirrel"  id="9"><img class="img" alt="9" src="static/img/2.jpg"></td>
                </tr>
         </tbody>
         <tfoot>
               <tr>
                 <td id="stop" onclick="stop()">暂停</td>
                 <td id="end"onclick="end()">结束</td>
                 <td id="restartAfterStop"onclick="restartAfterStop()">暂停后开始</td>
             </tr>
         </tfoot>
    </table>
    </div>
</body>
</html>